<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/head::head">
</head>

<body>
<div class="layui-row">
    <button onclick="edit()" class="layui-btn layui-btn-sm">新增角色</button>
</div>
<table class="layui-table" id="table" lay-filter="table"></table>
<script type="text/html" id="bar">
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="dynamic">动态</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="update">编辑</a>
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
</script>
<script type="text/javascript">
    var col = [
        {field: 'name', title: '名称'},
        {field: 'bindCount', title: '授权人数'},
        {field: 'updateTime', title: '修改时间'},
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar', fixed: 'right'}
    ];

    function loadSuccess() {
        tableRender({
            id: 'table',
            elem: '#table',
            url: './list_data.json',
            cols: [col]
        });

        table.on('tool(table)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if ('update' === event) {
                // 修改
                edit(data.id);
            } else if ('dynamic' === event) {
                layerOpen({
                    type: 2,
                    title: '编辑角色',
                    content: './dynamicData.html?id=' + data.id,
                    area: ['80%', '80%'],
                });
            } else if ('delete' === event) {
                del(data);
            }
        });
    }

    function del(data) {
        layer.confirm('确定删除【' + data.name + '】此角色吗？', {
            title: '系统提示'
        }, function (index) {
            layer.close(index);
            loadingAjax({
                url: './del.json',
                data: {
                    id: data.id
                },
                success: function (data) {
                    layer.msg(data.msg);
                    if (200 === data.code) {
                        table.reload('table', {});
                    }
                }
            });
        });
    }

    function edit(id) {
        layerOpen({
            type: 2,
            title: '编辑角色',
            content: './edit.html?id=' + id,
            area: ['80%', '80%'],
        });
    }
</script>
</body>